@import './base.css';/*引入基础样式文件，通常包含全局变量、重置样式等*/

#app {
  max-width: 1280px;    /*最大宽度*/
  margin: 0 auto;       /*水平居中*/
  padding: 2rem;        /*内边距，创建内容与边缘的空间*/
  font-weight: normal;  /*设置正常字体粗细*/
}

a,
.green {
  text-decoration: none;            /*去除下划线*/
  color: hsla(160, 100%, 37%, 1);    /*使用 HSLA 色彩模式定义青绿色（色相 160°，饱和度 100%，亮度 37%，不透明度 100%）*/
  transition: 0.4s;                    /*为所有属性变化添加 0.4 秒的过渡动画*/
  padding: 3px;                        /*添加内边距，扩大交互区域*/
}

@media (hover: hover) {
  a:hover {                           /*鼠标悬停时的效果*/
    background-color: hsla(160, 100%, 37%, 0.2);     /*添加半透明的背景色，增强交互反馈*/
  }
}

@media (min-width: 1024px) {
  body {
    display: flex;              /*使用 Flexbox 布局*/
    place-items: center;        /*在主轴和交叉轴上都居中对齐内容*/
  }

  #app {
    display: grid;              /*使用 Grid 布局*/
    grid-template-columns: 1fr 1fr;     /*创建两列等宽的网格布局*/
    padding: 0 2rem;                /*调整内边距，保持左右间距*/
  }
}
